<template>
  <div class="head d-flex flex-column justify-content-center">
    <div class="title">我的账号</div>
    <div class="div2 d-flex flex-wrap justify-content-between">
      <div @click="goFans">
        <div>{{ fans }}</div>
        <div>粉丝</div>
      </div>
      <div @click="goWatch">
        <div>{{ follows }}</div>
        <div>关注</div>
      </div>
      <div @click="goPostList">
        <div>{{ posts }}</div>
        <div>帖子</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { findUserById } from '@/api/service'
import { useLocalStorage } from '@/utils/useLocalStorage'
import { useRouter } from 'vue-router';
const router = useRouter()
const fans = ref(0)
const follows = ref(0)
const posts = ref(0)

onMounted(async () => {
  const res: any = await findUserById(
    localStorage.getItem('userInfo')?  JSON.parse(useLocalStorage.get('userInfo')).id :''
  )
  console.log('res', res.data[0].posts.length)
  if (res.data[0].posts!=null) {
    posts.value = res.data[0].posts.length
  }
  if (res.data[0].follows!=null) {
    follows.value = res.data[0].follows.length
  }  if (res.data[0].fans!=null) {
    fans.value = res.data[0].fans.length
  }
})
const goFans = () => {}
const goWatch = () => {}
const goPostList = () => {
  router.push(`postlistlayout?userId=${localStorage.getItem('userInfo')?  JSON.parse(useLocalStorage.get('userInfo')).id :''}`)
}
</script>

<style scoped lang="scss">
.head {
  margin-top: 15vw;
  margin-bottom: 5vw;
  height: 15vw;
  width: 100vw;

  .title {
    padding-left: 8vw;
    font-size: 0.4rem;
    color: black;
  }
  .div2 {
    margin: 0.8rem;
    font-size: 0.4rem;
    color: black;
    display: flex;

    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.1rem;
      div {
      }
    }
  }
}
</style>
